<template>
	<navbar :titleText="top_tittle"/>
	<up-search 
		v-if="is_serach"
		value ="search_data"
		placeholder="搜索" 
		height="64rpx"
		margin="10rpx 20rpx"
		v-model="search_data"
		@custom="toSearch"
		@search="toSearch"
	></up-search>
	
	<view class="line"></view>
	
	<view class="card" v-for="(item,index) in page_id" :key="index" :data-hid="item" @click="toDatail">
		<image :src="page_data[item].img" class="card-img"></image>
		<view class="card-text">
			<view class="card-name">{{page_data[item].name}}</view>
			<view class="card-introduce">{{page_data[item].introduce}}</view>
			<view class="card-author">{{page_data[item].author}}</view>
		</view>
	</view>
	
	<view class="line" v-if="page_id.length"></view>
	
	<view class="footer-text">
		<text>没有更多了</text>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { customRef, reactive, ref, toRaw } from 'vue';
	
	var is_serach = false
	var search_data =ref()
	const app = getApp()
	const top_tittle =ref()
	const page_data = ref([])
	const page_id =ref([])
	
	onLoad((option)=>{
		init(option)
	})
	
	const init = (option)=>{
		app.globalData.utils.request({   //获取主数据包
			url:"/all_products",
			success:res =>{
				page_data.value=res
			},
			fail:err =>{
				console.log(err)
			}
		})
		app.globalData.utils.request({    //获取初始化id数据
			url:"/init_products_id",
			success:res =>{
				if(option.totext =='hot'){
					top_tittle.value = '热门曲谱'
					
					for(let i = 0; i < res.length; i++) {
					  page_id.value[i] = res[i].init_hot_id
					}
				}else if(option.totext =='good'){
					top_tittle.value = '今日精选'
					for(let i = 0; i < res.length; i++) {
					  page_id.value[i] = res[i].init_good_id
					}
				}else if(option.totext =='recommend'){
					top_tittle.value = '曲谱推荐'
					for(let i = 0; i < res.length; i++) {
					  page_id.value[i] = res[i].init_recommend_id
					}
				}else if(option.totext =='selected'){
					top_tittle.value = '精选推荐'
					for(let i = 0; i < res.length; i++) {
					  page_id.value[i] = res[i].init_selected_id
					}
				}else{
					top_tittle.value = '搜索'			
					is_serach=true 						//显示搜索栏
					search_data.value = option.totext    //设置搜索默认值
					for(let i = 0; i < page_data.value.length; i++) {		//匹配数据
						if(page_data.value[i].name.includes(option.totext)){
							 page_id.value.unshift(i)
						}else if(page_data.value[i].author.includes(option.totext)){
							 page_id.value.push(i)
						}else if(page_data.value[i].album.includes(option.totext)){
							page_id.value.push(i)
						}
					}
				}
			},
			fail:err=>{
				console.log(err)
			}
		})
	}
	const toDatail =(e)=>{     //跳转详情
		app.globalData.utils.toDetails(e.currentTarget.dataset.hid)
	}
	
	const toSearch = ()=>{    //跳转搜索详细
		uni.navigateTo({
			url:'/pages/list/index?totext='+ search_data.value
			
		})
	}
</script>

<style>
	.line{
		height: 20rpx;
		background-color: #F5F5F5;
	}
	.card{
		margin-left: 40rpx;
		margin-right: 40rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		display: flex;
		height: 252rpx;
		
	}
	.card-img{
		width: 180rpx;
		height: 252rpx;
	}
	.card-text{
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		width: 570rpx;
	}
	.card-name{
		color: #333333;
		font-size: 34rpx;
	}
	.card-introduce{
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		height: 80rpx;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.card-author{
		color: #333333;
		font-size: 26rpx;
	}
	.footer-text{
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		text-align: center;
	}
</style>
